@extends("backend.layout.main")

@section('after.css')
	<script type="text/javascript" src="backend/js/project.js"></script>
	<style>
		.gray{background: #ccc;border: #ccc;}
		.task-list td{padding:0 2px;}
		.task-list-right{width: 763px;}
		td.td1{width:170px}
		td.td2{width:70px}
		td.td3{width:120px}
		td.w40{width:40px}
		td.td4{width:120px}
		td.td5{width:120px}
		td.td6{width:80px}
		td.td1 input,td.td2 input,td.w40 input,td.td3 input,td.td4 input,td.td5 input,td.td6 input{width:100%}
		td.td2,td.td3,td.w40,td.td4,td.td5{text-align: center;}
		.template-task-list{max-height: 400px; overflow-y: scroll;}
		.modal .modal-dialog{width: 990px; position: absolute; top: 30px; left: 50%; margin-left:-495px;z-index: 9;}
	</style>
@endsection


@section("right_content")
	<style>
		*{
			box-sizing: border-box;
		}

	</style>

	<div class="mainWrapBox">
		<div class="mainBox">

			<h1>模板模板设置</h1>
			<div class="html">

				@include('backend.layout.comset')

				<div class="auto-width-220">
					<input type="hidden" name="start" id="start" value="0">
					<input type="hidden" name="limit" id="limit" value="12">
					<div class="listWrapbox mt10" id="main-right">
						<h2>项目模板设置</h2>
						<div class="account-nav">
							<a class="current">内部模板库</a>
						</div>
						<div class="template-list clearfix">
							<ul>
								<li class="add-template">
									<!--<a class="icon-add2" href="javascript:void(0);" onclick="document.getElementById('templatePanel').style.display='block'">创建项目模板</a>-->
									<a class="icon-add2" href="javascript:void(0);" onclick="getTaskTemplate(0);">创建项目模板</a>
								</li>
								@foreach($template as $t)
									<li data="{{$t->tid}}">
										<div class="title">{{$t->name}}</div>
										<div onclick="getTaskTemplate({{$t->tid}});">
											<p>适用项目类型：{{$t->project_type_name}}</p>
											<p class="under-line">应用项目数：1个</p>
											<p>{{date('Y-m-d', $t->ptime)}}</p>
											<p style="float:right;color:red;"><span class="hide">复制</span>&nbsp;<span class="hide">删除</span></p>
										</div>
									</li>
								@endforeach
							</ul>
						</div>
						<div class="template-page mt20"><table class="table ">
								<tbody class="table-footer">
								<tr>
									<td style="text-align: left;">
								<span>
									共查到 {{count($template)}} 条数据
								</span>
									</td>
									<td style="text-align: right; vertical-align: middle;"></td>
								</tr>
								</tbody>
							</table></div>
					</div>
				</div>
			</div>
			<div class="modal" id="templatePanel" style="display:none;">
				<div class="modal-backdrop" style="height:100%;z-index:8;"></div>
				<form id="createTaskTemplate">
					<div data="check" class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header" style="background-color: #f2f2f2">
								<span class="modal-title">项目设置 &gt; 创建任务模板</span>
								<span class="modal-close" style=" margin-left:90%" title="关闭" onclick="document.getElementById('templatePanel').style.display='none'" >×</span>
							</div>
							<div class="modal-body" style="width: 100%; padding: 15px; max-height: 596px; background-color: rgb(255, 255, 255);">
								<input type="hidden" name="tid" value="" id="templateId">
								<input type="hidden" name="projectTypeIds" id="projectTypeIds">
								<input type="hidden" name="stages" id="projectStages">
								<input type="hidden" name="delTaskId" value="" id="delTaskId">
								<table cellpadding="0" cellspacing="0">
									<tbody>
									<tr>
										<td width="100" align="right" class="add-template-names">模板名称<em class="orangeColor">*</em></td>
										<td><input type="text" class="w200" name="name" value="" placeholder="输入模板名称"></td>
										<td width="100" align="right" class="add-template-names">适用项目类型<em class="orangeColor">*</em></td>
										<td><div class="Template-rel" style="position: relative;">
												<input type="text" class="w200" id="projectCategory" readonly="readonly" data-id="" value="" placeholder="选择项目类型">
												<div class="fudong_add_td input_dowm" style="display: none;margin-top: -15px;">
													<ul style="float:none;" class="fudong_add_ul">
														@foreach($type as $p)
															<li data-id="{{ $p->type_id }}">{{ $p->name }}</li>
														@endforeach
														<div class="cl"></div>
													</ul>
													<div class="cl"></div>
												</div>
											</div>
										</td>
									</tr>
									</tbody>
								</table>
								<div class="task-list pt20">
									<div class="task-list-left f_l" style="width: 195px;">
										<div class="task-step">Step 01 设置项目阶段</div>
										<div style="position: relative;" class="clearfix">
											<input type="text" id="projectStage" class="Template_name w160" maxlength="10" placeholder="输入并选择阶段，回车提交">
											<div class="fudong_add_td input_dowm" style="display: none;margin-top: -15px;width: 160px;">
												<ul style="float:none;" class="fudong_add_ul">
													@foreach($phase as $p)
														<li onclick="addTemplateTaskStage(this)" data-id="{{ $p->sid }}">{{ $p->name }}</li>
													@endforeach
													<div class="cl"></div>
												</ul>
												<div class="cl"></div>
											</div>
										</div>
										<ul class="task-stage ui-sortable" id="template-task-stage">
										</ul>
									</div>
									<div class="task-list-right f_r">

										<div class="task-step"> Step 02 创建
											<label id="task_list2" style="color: #66CC99;font-size: 14px;"></label> 的阶段
											<span class="f_r icon-add" style="padding-top: 10px;background-image:url(images/icon_add.png);" onClick="addTemplateTask();"></span> </div>
										<div class="template-task-list">
											<table id="task_list1" width="100%">
												<thead>
												<tr>
													<th></th>
													<th></th>
													<th></th>
													<th></th>
													<th></th>
													<th></th>
													<th></th>
													<th></th>
												</tr>
												</thead>
												<tbody id="task_list" style="display:hidden;">
												</tbody>
											</table>
										</div>

									</div>

									<div class="cl"></div>
								</div>
								<div class="cl"></div>
								<div class="modal-footer">
									<a class="btn modal-cancel" onclick="document.getElementById('templatePanel').style.display='none'">取消</a>
									<a class="btn green" onclick="saveTaskTemplate();">确定</a>
								</div>
								<div class="cl"></div>
							</div>
						</div>
				</form>
			</div>
			<script type="text/javascript">
				var i = 0;
				var submitForm = true;
				var task = <?php echo json_encode($role)?>; //项目类型下的角色组
				var projectTypeIds = 0; // 项目类型id

				// 阶段名称 template_stage
						@foreach($phase as $p)
                            var stagesName{{$p->sid}}= '{{ $p->name }}';
				@endforeach

				$(document).on("click","table .fudong_add_ul li",function(){
					var text = $(this).text();
					var phase_id = $(this).data('id');
					projectTypeIds = phase_id;
					$(this).parent().parent().prev().data('id',phase_id).val(text);
					$(this).parent().parent().hide();
				});

				$(document).on('click',function(e){
					var ofs=$(e.target).parents().hasClass("fudong_add_td");
					var ofg=$(e.target).hasClass("fudong_add_td");
					var osg=$(e.target).hasClass("Template_name");
					if(!osg) {
						if(ofs || ofg){
						}
						else{
							$(".fudong_add_td").hide();
						}
					}else{
						$(".fudong_add_td").hide();
						$(e.target).parent().find(".fudong_add_td").show();
					}
				});

				function getTaskTemplate(id){

					$.ajax({
						url: "{{URL::route('backend.template.getTemplate')}}",
						type: 'post',
						dataType: 'json',
						data:{'id':id},
						cache: false,
						success: function (data) {

							$('#template-task-stage').html('');//阶段列表
							$('#task_list2').html('');//当前阶段名称
							$('#task_list').html('');//任务列表

							if(data != ''){
								projectTypeIds = data.project_type_id;

								$('#templateId').val(data.tid); //模板id
								$('input[name=stages]').val(data.stages_id); //阶段id
								$('input[name=projectTypeIds]').val(data.project_type_id);//项目类型id
								$('input[name=name]').val(data.name);
								$('#projectCategory').val(data.project_type_name); //项目类型
								$("#projectCategory").data("id", data.project_type_id);//保存时会调用此data-id
								$('#projectCategory').removeClass("Template_name").addClass('gray'); //去掉项目属性能编辑选择功能

								// 左边阶段列表
								var stagesArr = data.stages_id.split(',');
								for(var t=0; t<stagesArr.length; t++){
									var sgClass = t==0 ? 'selected':'';
									var html = '<li class='+ sgClass +'><a data-id="' + stagesArr[t] + '">' + eval('stagesName' + stagesArr[t] ) + '</a><span class="icon-remove2"></span></li>';
									$("#template-task-stage").append(html);

									if(data.task[stagesArr[t]])
										addtask(data.task[stagesArr[t]]);

								}

								saveTemplateTask();
								$("#task_list tr").hide();

								if(stagesArr.length>0){
									template_stage = stagesArr[0];
									$('#task_list2').html(eval('stagesName' + stagesArr[0] ));
									$("#task_list [data-stage=" + stagesArr[0] + "]").show();
								}


							}else{

								projectTypeIds = 0;
								$('#templateId').val(''); //模板id
								$('input[name=stages]').val(''); //阶段id
								$('input[name=projectTypeIds]').val('');//项目类型id
								$('input[name=name]').val('');
								$('#projectCategory').val(''); //项目类型
								$("#projectCategory").data("id", '');
								$('#projectCategory').addClass("Template_name").removeClass('gray');
							}

							$("#templatePanel").show();

						},
						error: function (msg) {
							alert(msg);
						}
					});
				}

				function addtask(obj){
					if( obj =='' ) return false;
					$.each(obj, function(key, el){
						if(template_stage == undefined){
							template_stage = -1;
						}
						var html = '<tr class="parent-task" edit_flag="1" data-stage="'+el.sid +'" data-id="'+ el.task_id +'" data-pid="1" onmousemove="remove_tag(this);" onmouseout="hide_tag(this);">';
						html += '<td class="td1"><span class="hide"></span><input type="text" class="" value="'+el.task_name+'" name="edittaskName['+el.sid+'][]" placeholder="输入任务名称" /></td>';

						//添加子任务暂时隐藏
						// html += '<td class="add-sub-task td2">+子任务</td>';
						html += '<td  class="td2"><span class="hide">绩效</span><input type="text" class="" name="editperformance['+el.sid+'][]" value="'+el.performance+'" placeholder="绩效" /></td>';

						html +='<td  class="td3"><span class="hide"></span><select name="edittypeId['+el.sid+'][]"><option value="">项目角色</option>';

						if(task[projectTypeIds] && task[projectTypeIds]['role']){
							$.each(task[projectTypeIds]['role'], function (k, ele) {
								var selected = el.type_id == k ? 'selected':'';
								html += '<option value="'+k+'" '+ selected +' class="sl_'+k+'">'+ele.name+'</option>';
							});

						}
						html +='</select></td>';
						html +='<td  class="td4"><span class="hide">专家审核</span><select name="editroleId['+el.sid+'][]"><option value="'+el.role_id+'" class="sl_'+el.role_id+'">专家审核</option></select></td>';

						html +='<td  class="td5"><span class="hide"></span><select name="editaudit_rank['+el.sid+'][]"><option value="">二次审核</option>'
								+'<option value="1" '+ (el.audit_rank==1 ? 'selected':'') +' class="sl_1">商务审核</option>'
								+'<option value="2" '+ (el.audit_rank==2 ? 'selected':'') +' class="sl_2">客户审核</option>';

						// if(task[projectTypeIds] && task[projectTypeIds]['auditor']){
						// $.each(task[projectTypeIds]['auditor'], function (k, ele) {
						// var selected = el.role_id == k ? 'selected':'';
						// html += '<option value="'+k+'" '+ selected +'>'+ele.name+'</option>';
						// });

						// }

						html +='</select></td>';
						html += '<td  class="td6"><span class="hide">备注</span><input type="text" class="" value="'+el.remark+'" name="editremark['+el.sid+'][]" placeholder="备注" /></td>';
						html += '<td class="w40"><span class="hide"></span><input type="text" class="process" name="editlevel['+el.sid+'][]" value="'+el.level+'" placeholder=""/></td>';
						html += '<td><div class="icon-remove2" style="width:16px;height=16px;cursor:pointer;background:#fff;"onmousemove="remove_tag(this);" onmouseout="hide_tag(this);"></div><input type="hidden" name="task_id['+el.sid+'][]" value="'+ el.task_id +'"></td>';
						html += '</tr>';
						$("#task_list").append(html);
					})
				}

			</script>

		</div>
	</div>
	</div>
@endsection
